import React, { Component } from 'react'
import { Menu } from 'antd';
import { Link } from 'react-router-dom'
import './index.scss'


import {
  AppstoreOutlined,
  BarChartOutlined,
  AreaChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
  UserOutlined
} from '@ant-design/icons';

const menuList = [
    {
      title: '首页', //菜单标题名称
      key: '/home',  //对应的path
      icon: <DesktopOutlined />,  //图标名称
      isPublic: true  //这是为公开的界面 所有用户都可以看到
    },
    {
      title: '商品', 
      key: '/products',  
      icon: <AppstoreOutlined /> ,
      children: [  //子菜单列表
        {
          title: '品类管理', 
          key: '/category',  
          icon: <MailOutlined />  
        },
        {
          title: '商品管理', 
          key: '/product',  
          icon: <MailOutlined />  
        }
      ]
    },
    {
        title: '用户管理', 
        key: '/user',  
        icon: <UserOutlined />,  
    },
    {
        title: '角色管理', 
        key: '/role',  
        icon: <ContainerOutlined />,  
    },
    {
      title: '图形图表', 
      key: '/chars',  
      icon: <AreaChartOutlined />,
      children: [
        {
          title: '柱形图',
          key: '/chars/bar',
          icon: <BarChartOutlined />
        },
        {
          title: '折线图',
          key: '/chars/line',
          icon:   <LineChartOutlined />
        },
        {
          title: '饼型图',
          key: '/chars/pie',
          icon: <PieChartOutlined />
        }
      ]  
  }
]

const { SubMenu } = Menu;
// 左侧导航的组件
 class LeftNav extends Component {

  // 在第一次render() 之前执一次 为第一次render()准备数据（同步的）
  UNSAFE_componentWillMount(){
    //组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次 
    this.menuNodes =this.getMenuNodes(menuList) 
  }
  

   // 定义方法 reduce() + 递归调用
  getMenuNodes = (menuList) => {
    return menuList.reduce((pre,item)=>{
      // 向pre添加 Menu.Item 或者 SubMenu
      if (!item.children) {
        // 添加 Menu.Item
        pre.push(
          (<Menu.Item key={item.key} icon={item.icon}>
                 <Link to={item.key}>{item.title}</Link>
          </Menu.Item>)
        )
      } else {
        // 添加 SubMenu
        pre.push((
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {
              this.getMenuNodes(item.children)
            }
          </SubMenu>
        ))
      }
      return pre
    },[ ])
  } 

    render() {

      //  const menuNodes = this.getMenuNodes(menuList)
      
      // 得到需要打开菜单项的key
      const openKey = this.openKey
        return (
            <div className="left-nav">
              <h1 to="/" className="left-nav-header">
                <img src='' alt="logo"/>
                <h1>后台管理</h1>
              </h1>
              <Menu
                defaultOpenKeys={[openKey]}
                mode="inline"
                theme="dark"
              >
                {/* <Menu.Item key='/home' icon={<DesktopOutlined />}>
                  <Link to='/home'>首页</Link>
                </Menu.Item>
                <SubMenu key="sub1" icon={<MailOutlined />} title="商品">
                  <Menu.Item key='/category' icon={<MailOutlined />}><Link to='/category'>品类管理</Link></Menu.Item>
                  <Menu.Item key='/product' icon={<MailOutlined />}><Link to='/product'>商品管理</Link></Menu.Item>
                </SubMenu> */}

                {/* 根据导入的menuList动态生成菜单导航 */}
                {
                  this.menuNodes
                }
                
              </Menu>
            </div> 
          )
    }
}

// 高阶组件：包装非路由组件 返回一个新的组件 
    // 新的组件会向非路由组件传递三个属性： histroy location match
// export default withRouter(LeftNav)

export default LeftNav